<template>

  <div class="wrapper">

    <swiper :options="swiperOption" class="iconear" v-if="pages.length">
      <!-- slides -->
      <swiper-slide  class="icon1" v-for="(pa,index) of pages" :key="index">

        <div v-for="item of pa" :key="item.id" class="xixi">
        <img :src="item.imgUrl" class="icon"/>
        <p>{{item.desc}}</p>
        </div>

      </swiper-slide>


      <!-- Optional controls -->
      <div class="swiper-pagination"  slot="pagination"></div>

    </swiper>


    <!--<div class="icon1">-->
     <!--<img src="http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png" class="icon"/>-->
     <!--<p>景点门票</p>-->
   <!--</div>-->
    <!--<div class="icon1">-->
      <!--<img src="http://img1.qunarzz.com/piao/fusion/1804/ff/fdf170ee89594b02.png" class="icon"/>-->
      <!--<p>广州必游</p>-->
    <!--</div>-->
    <!--<div class="icon1">-->
      <!--<img src="http://img1.qunarzz.com/piao/fusion/1803/76/eb88861d78fb9902.png" class="icon"/>-->
      <!--<p>动植物园</p>-->
    <!--</div>-->
    <!--<div class="icon1">-->
      <!--<img src="http://img1.qunarzz.com/piao/fusion/1803/95/8246f27355943202.png" class="icon"/>-->
      <!--<p>游乐场</p>-->
    <!--</div>-->
    <!--<div class="icon1">-->
      <!--<img src="http://img1.qunarzz.com/piao/fusion/1803/3e/86314b2af03b7502.png" class="icon"/>-->
      <!--<p>珠江夜游</p>-->
    <!--</div>-->
    <!--<div class="icon1">-->
      <!--<img src="http://img1.qunarzz.com/piao/fusion/1803/ab/6f7d6e44963c9302.png" class="icon"/>-->
      <!--<p>泡温泉</p>-->
    <!--</div>-->
    <!--<div class="icon1">-->
      <!--<img src="http://img1.qunarzz.com/piao/fusion/1804/5a/13ceb38dcf262f02.png" class="icon"/>-->
      <!--<p>一日游</p>-->
    <!--</div>-->
    <!--<div class="icon1">-->
      <!--<img src="http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20192/b34a13fd372f5ce8cb2c954ffe25622d.png" class="icon"/>-->
      <!--<p>周边游</p>-->
    <!--</div>-->
    <!--<div class="icon1">-->
      <!--<img src="http://img1.qunarzz.com/piao/fusion/1803/ab/6f7d6e44963c9302.png" class="icon"/>-->
      <!--<p>泡温泉</p>-->
    <!--</div>-->


  </div>
</template>

<script>
    export default {
        name: "Icon",
      props:{

          icon:Array


      },
      data() {
        return {
          swiperOption: {
            // 小圆点
            pagination: '.swiper-pagination',
            loop:true
          },
        //   iconList:[{
        //     id:"001",
        //     img_src:'http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png',
        //     desc:'景点门票'
        //   },{
        //     id:"002",
        //     img_src:'http://img1.qunarzz.com/piao/fusion/1804/ff/fdf170ee89594b02.png',
        //     desc:'景点门票'
        //   },
        //     {
        //       id:"003",
        //       img_src:'http://img1.qunarzz.com/piao/fusion/1803/76/eb88861d78fb9902.png',
        //       desc:'景点门票'
        //     },
        //     {
        //       id:"004",
        //       img_src:'http://img1.qunarzz.com/piao/fusion/1803/95/8246f27355943202.png',
        //       desc:'景点门票'
        //     },{
        //       id:"005",
        //       img_src:'http://img1.qunarzz.com/piao/fusion/1804/5a/13ceb38dcf262f02.png',
        //       desc:'景点门票'
        //     },
        //     {
        //       id:"006",
        //       img_src:'http://img1.qunarzz.com/piao/fusion/1803/ab/6f7d6e44963c9302.png',
        //       desc:'景点门票'
        //     },
        //     {
        //       id:'007',
        //       img_src:'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20192/b34a13fd372f5ce8cb2c954ffe25622d.png',
        //       desc:'景点门票'
        //
        //     },
        //
        //     { id:"008",
        //       img_src:'http://img1.qunarzz.com/piao/fusion/1803/95/8246f27355943202.png',
        //       desc:'景点门票'
        //     },
        // {
        //      id:'009',
        //      img_src:'http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png',
        //      desc:'景点门票'
        //
        // }
        //
        //
        //   ]
        }
      },
      computed:{
           // 将内容分为两组
            pages(){

              const pages=[]
              this.icon.forEach((item,index)=>{

                const page=Math.floor(index/8)
                if(!pages[page]){
                  pages[page]=[]
                }
                pages[page].push(item)

              })
              return pages


            }



      }






    }
</script>

<style scoped lang="stylus">
  @import '~styles/backthemcolor.styl'
  @import '~styles/shengluehao.styl'
 .wrapper >>> .swiper-pagination-bullet-active
   background $backcolor
 .iconear
   width 100%
   height 0px
   overflow hidden
   padding-bottom 55%
   padding-top 3%
   .icon1
    width 25%
    float: left
    text-align center
    .xixi
      width 25%
      float: left
      display inline-block
     .icon
      width 70%
      float: left
      padding 0 15%
     p
      width 70%
      padding 6% 15%
      font-size .22rem
      shenglue()















</style>
